<template>
  <div id="cart">
    <!-- 无理由退货 -->
    <van-row>
      <van-col span="8"
        ><van-icon name="checked" color="#8B0000" />30天无忧退货</van-col
      >
      <van-col span="8"
        ><van-icon name="checked" color="#8B0000" />48小时快速退费</van-col
      >
      <van-col span="8"
        ><van-icon name="checked" color="#8B0000" />满88元免邮费</van-col
      >
    </van-row>
    <!-- 商品 -->
    <div class="cart_goods" v-for="v in cartList" :key="v.id">
      <!-- 复选框 -->
      <van-checkbox
        v-model="v.checked"
        class="xuan"
        ref="pick"
        @click="pick(v)"
        :disabled="name"
      ></van-checkbox>
      <!-- 卡片 -->
      <van-swipe-cell class="card">
        <van-card
          :num="v.number"
          :price="v.retail_price + '.00'"
          :title="v.goods_name"
          class="goods-card"
          :thumb="v.list_pic_url"
        />
        <van-stepper
          v-model="v.number"
          min="1"
          max="100"
          class="stepper"
          ref="stepper"
          v-show="stepper"
          @change="bu(v)"
          :default-value="v.number"
        />
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="del(v)"
          />
        </template>
      </van-swipe-cell>
    </div>

    <!-- 立即购买 -->
    <van-submit-bar
      :price="cartTotal.goodsAmount * 100"
      button-text="立即购买"
      @submit="onSubmit"
      class="tijiao"
    >
      <van-checkbox v-model="checkedAll" :disabled="isEditing"
        >全选</van-checkbox
      >
      <template #tip class="huang">
        <span @click="onClickEditAddress" class="word"
          >累计共{{ cartTotal.goodsCount }}件商品，可点击
          <van-button
            :type="name?'danger':'primary'"
            class="bianji"
            @click="bianji"
            ref="bianji"
            >{{ name == false ? "编辑" : "完成编辑" }}</van-button
          >按钮进行商品数量修改
        </span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import {
  GetCartIndex,
  PostCartChecked,
  PostCartUpdate,
  PostCartDelete,
} from "@/request/api";
export default {
  data() {
    return {
      value: "",
      checked: 0,
      // 商品总列表
      cartList: "",
      // 购物车数据
      cartTotal: "",
      stepper: false,
      name: false,
      isEditing: false,
      result: "",
      se:""
    };
  },

  components: {},

  created() {
    GetCartIndex().then((res) => {
      // console.log(res);
      this.cartList = res.data.cartList;
      this.cartTotal = res.data.cartTotal;
      this.value = res.data.cartList.number;
      // console.log(this.cartList[1].number);
    });
    // PostCartUpdate({goodsId:}).then(res=>{

    // })
  },

  methods: {
    bianji() {
      this.stepper = !this.stepper;
      this.name = !this.name;


    },
    wancheng() {},
    onSubmit() {
      alert("该功能暂未开放");
    },
    onClickEditAddress() {},
    pick(v) {
      PostCartChecked({
        isChecked: v.checked == 0 ? 1 : 0,
        productIds: v.product_id,
      }).then((res) => {
        // console.log(res);
      });
    },
    bu(v) {
      PostCartUpdate({
        goodsId: v.goods_id,
        id: v.id,
        number: v.number,
        productId: v.product_id,
      }).then((res) => {
        // console.log(res);
        //  this.$router.go(0);
        this.cartList = res.data.cartList;
        this.cartTotal = res.data.cartTotal;
      });
    },
    del(v) {
      PostCartDelete({ productIds: JSON.stringify(v.product_id) }).then(
        (res) => {
          // console.log(res);
          this.cartList = res.data.cartList;
        }
      );
    },
  },
  computed: {
    /* 全选按钮 */
    checkedAll: {
      get() {
        return this.result.length == this.cartList.length;
      },
      set(val) {
        // console.log(val);
        let ids_arr = [];
        this.cartList.map((item) => {
          ids_arr.push(item.product_id);
        });
        PostCartChecked({
          isChecked: val ? 1 : 0,
          productIds: ids_arr.join(),
        }).then((res) => {
          if (res.errno == 0) {
            // console.log(res);
            this.cartList = res.data.cartList;
            this.cartTotal = res.data.cartTotal;
            //清空this.result数组
            this.result = [];
            this.cartList.map((item) => {
              item.checked == 1 ? this.result.push(item.id) : "";
            });
          }
        });
      },
    },
  },
};
</script>
<style lang='less' scoped>
.van-col {
  font-size: 0.13rem;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.cart_goods {
  // padding: 0 .1rem;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 10px 0;
  border-bottom: 0.01rem solid #cccccc;
}
.card {
  width: 100%;
}
.xuan {
  margin-left: 0.1rem;
  width: 0.3rem;
}
.van-card {
  background-color: #fafafa;
  padding: 8px 16px;
}
.bianji,
.wancheng {
  font-size: 0.12rem;
  height: 0.32rem;
}
.tijiao {
  bottom: 0.5rem;
}
.word {
  line-height: 0.32rem;
}
.stepper {
  float: right;
}
</style>